<!DOCTYPE html>
<script src="../../../../../resources/testharness.js"></script>
<script src="../../../../../resources/testharnessreport.js"></script>
<script src="../../../../../fast/spatial-navigation/resources/snav-testharness.js"></script>

<style>
  .box {
    width: 100px;
    height: 30px;
    margin: 5px;
    border: 1px solid black;
    display: inline-block;
  }
</style>

<div class="box" tabindex="0">Top-Left</div>
<div class="box" tabindex="0">Top</div>

<div class="container">
  <div class="box" tabindex="0">Left</div>
  <input class="box" id="input" type="text" value="center">
  <div class="box" tabindex="0">Right</div>
</div>

<div class="box" tabindex="0">Bottom-Left</div>
<div class="box" tabindex="0">Bottom</div>

<script>
  // This test ensures that when an editable has focus, arrow keys don't cause
  // spatial-navigation movement.
  let first = document.getElementById("first");
  let second = document.getElementById("second");
  let third = document.getElementById("third");

  let input = document.getElementById("input");

  function testDirection(direction, expectMove) {
    // We move twice because the first move will be interpreted as an editor
    // command while the second will be ignored by the editor. We shouldn't
    // move interest in either case.
    snav.triggerMove(direction);
    snav.triggerMove(direction);

    if (expectMove) {
      assert_not_equals(
          window.internals.interestedElement,
          input,
          direction + " key expected to move interest but didn't,");
    } else {
      assert_equals(
          window.internals.interestedElement,
          input,
          direction + " key did not expect to move interest but did,");
    }

    // Reset focus so the focused input box starts in a consistent state (fully
    // selected) for the next test.
    eventSender.keyDown('Escape');
    eventSender.keyDown('Enter');
  }

  test(() => {
    // Move interest to editable 'input' box and focus it.
    snav.triggerMove('Down');
    snav.triggerMove('Down');
    snav.triggerMove('Right');
    eventSender.keyDown('Enter');
    assert_equals(document.activeElement, input);
    assert_equals(window.internals.interestedElement, input);

    // Ensure directional keys don't cause spatial navigation to move interest.
    // We move twice because the first move will be interpreted as an editor
    // command while the second will be ignored by the editor. We shouldn't
    // move interest in either case.
    let expectMove = false;
    testDirection('Down', expectMove);
    testDirection('Left', expectMove);
    testDirection('Right', expectMove);
    testDirection('Up', expectMove);

    // Ensure removing focus allows movement again.
    eventSender.keyDown('Escape');

    expectMove = true;
    testDirection('Down', expectMove);
  }, "Enter key moves focus into interested element");
</script>
